import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeAction, delAction } from "../store/action";
import { StateProps } from "../store/reducer";
import { RootState } from "../store/reducer";
// import { MyContext } from "./MyProvider";

const style = {
  marginTop: "5px",
  padding: "5px 0",
  boxShadow: "0 0 3px #eee",
};
interface IProps {
  todo: StateProps;
  index: number;
}
//props: IProps 解构为 {todo}: IProps
const TodoItem = ({ todo, index }: IProps) => {
  // const state = useSelector((state: RootState) => state);
  const dispatch = useDispatch();

  //所选项添加删除线
  const spanstyle = {
    textDecoration: todo.isFinished ? "line-through" : "none",
    marginRight: "30px",
  };

  // 1、添加点击事件，修改checked的状态，isFinished位于Todo组件，由Todo组件修改
  const changeHandler = () => {
    dispatch(changeAction(todo.id));
    // console.log(todo);
  };

  const delTodoHandler = () => {
    dispatch(delAction(index));
    console.log(index);
  };

  return (
    <div className="todo-item" style={style}>
      <input
        type="checkbox"
        checked={todo.isFinished}
        onChange={changeHandler}
      ></input>
      <span style={spanstyle}>{todo.text}</span>
      <button onClick={delTodoHandler}>删除</button>
    </div>
  );
};

export default TodoItem;
